<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="4">
                <el-button type="success" class="ml10" @click="onInsert">生成工资单</el-button>
            </el-col>
            <el-col :span="20" class="text-right">
                <!-- <el-input v-model="form.search" style="width: 240px" placeholder="请输入关键词" /> -->
                <el-date-picker class="ml15" v-model="form.issue_date" @change="onSelectDate" type="month" value-format="YYYY-MM" placeholder="请选择月份" />
                <el-button type="primary" class="ml10" :icon="Search" @click="onSearch">搜索</el-button>
                <el-button type="primary" class="ml10" :icon="RefreshRight" @click="onSearch('Refresh')" />
                <el-button @click="printElement"> 打印预览 </el-button>
                <!-- <el-button type="success" class="ml10" @click="onApply">提交发放申请</el-button> -->
            </el-col>
        </el-row>
        
        <el-table class="mt20" size="small" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;">																		
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column label="姓名" width="90">
                <template #default="scope">
                    <el-text>{{ scope.row.user.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="basic_salary" label="基本薪资" width="90" />
            <el-table-column label="岗位补贴" width="90">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.subsidies" @change="onChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="研发奖励" width="90">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.rewards" @change="onChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="其他补贴" width="90">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.other_subsidies" @change="onChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="社保基数" width="90">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.base" @change="onChange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="个人代扣" align="center">
                <el-table-column prop="pension_insurance" label="养老保险8%" width="120" />
                <el-table-column prop="medical_insurance" label="医疗保险2%" width="120" />
                <el-table-column prop="unemployment_insurance" label="失业保险0.5%" width="130" />
                <el-table-column prop="housing" label="住房8%" width="90" />
                <el-table-column prop="social_security" label="个税8%" width="90" />
                <el-table-column prop="tax" label="个税合计" width="90" />
            </el-table-column>
            <el-table-column prop="net_salary" label="总计(实际支付)" width="140" />
            <el-table-column label="支付方式" width="120">
                <template #default="scope">
                    <el-select size="small" v-model="scope.row.pay_type">
                        <el-option label="现金转账" value="现金转账" />
                        <el-option label="现金现付" value="现金现付" />
                        <el-option label="数字人民币" value="数字人民币" />
                        <el-option label="电子货币" value="电子货币" />
                        <el-option label="现金支票" value="现金支票" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="120">
                <template #default="scope">
                    <el-input class="no-border-input" v-model="scope.row.remarks" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
                <template #default="scope">
                    <el-link type="primary" @click="onEdit(scope.row)">保存</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isEdit" title="申请操作" width="50%">
        <component :is="salaryForm" :data = editId @onSave="onSave" />
    </el-dialog>

    <el-dialog v-model="isPrint" title="打印内容" width="80%">
        <component id="print" :is="salaryPrint" :data = form.issue_date :type="true" />
    </el-dialog>

</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import {  RefreshRight, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import http from '../../../util/request';
import salaryForm from './components/salaryForm.vue';
import salaryPrint from '@/components/salaryPrint.vue';
const indexMethod = (index: number) => {
  return index+= 1
}
const isPrint = ref<boolean>(false)
const isEdit = ref<boolean>(false)
const editId = ref<number>(0)
const form = ref<any>({search:'',issue_date:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
interface User {
    id: number
    basic_salary: number
    base:number
    subsidies: number
    rewards: number
    other_subsidies: number
    pension_insurance: number
    medical_insurance: number
    unemployment_insurance: number
    housing: number
    social_security: number
    tax: number
    net_salary: number
    remarks:string
    user:any
}

const tableData = ref<User[]>([])

const onGetData = () => {
    
    form.value.loading = true
    http.post('/user/wage',form.value).then((response:any)=>{
        form.value.loading = false
        response.data.data.forEach((e:User) => {
            onChange(e)
        });
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onChange = (e:any) => {
    e.basic_salary = e.user.basic_salary 
    e.pension_insurance = e.base * 0.08
    e.medical_insurance = e.base * 0.02
    e.unemployment_insurance = e.base * 0.005
    e.housing = e.base * 0.08
    e.social_security = e.base * 0.08
    e.net_salary = parseFloat(e.basic_salary) + parseFloat(e.rewards) + parseFloat(e.other_subsidies) + parseFloat(e.subsidies) - parseFloat(e.pension_insurance) - parseFloat(e.medical_insurance) - parseFloat(e.unemployment_insurance) - parseFloat(e.housing)  - parseFloat(e.social_security) 
    e.tax = e.pension_insurance + e.medical_insurance + e.unemployment_insurance + e.housing + e.social_security 
}

const onInsert = () => {
    if(!form.value.issue_date){
        ElMessage.error('请先选择日期');
        return
    }
    http.put('/user/wage',{issue_date:form.value.issue_date}).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);
            return
        }
        onGetData()
    })
}

const onEdit = (data:User) => {
    http.patch('/user/wage',data).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);
            return
        }
        ElMessage.success('操作成功');
    })
}

const printElement = () => {
    isPrint.value = true
}


// const onApply = () => {
//     if(!form.value.month){
//         ElMessage.error('请先选择月份')
//         return
//     }
// }

const onSelectDate = () => {
    onGetData()
}

const onSearch = (type = '') => {
    if(type == 'Refresh'){
        form.value.search = ''
        onGetData()
        return
    }
    if(!form.value.search){
        // ElMessage.error('请输入搜索内容')
    }
    form.value.page = 1
    onGetData()
}


// const onEdit = (id: number) => {
//     editId.value = id
//     isEdit.value = true
// }

onMounted(()=>{
    onGetData()
})

const onSave = () => {
    isEdit.value = false
    onGetData()
}

</script>

<style scoped>

/* 全局移除 el-input 边框 */
.no-border-input {
/* 覆盖 Element Plus 的 CSS 变量 */
	--el-input-border-color: transparent;
	--el-input-focus-border-color: transparent;
	--el-input-hover-border-color: transparent;
}

/* 配合移除阴影 */
:deep(.no-border-input .el-input__inner) {
	box-shadow: none;
}
</style>